<template>
  <el-main class="container">
    <!-- 导航栏 -->
    <h4 style="font-weight: normal">条形码发放回收管理</h4>

    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/barcodeGrantList' }"
        >条形码发放记录信息管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>条形码发放记录信息列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 头顶标签结束 -->

    <!-- Start Page content -->
    <el-card class="content">
      <el-row>
        <el-button type="primary" icon="el-icon-circle-plus-outline"
          >添加条形码退回信息</el-button
        >
        <el-button
          type="success"
          icon="el-icon-refresh"
          @click="refresh"
          style="font: 700; float: right"
        ></el-button>
      </el-row>
      <div class="block">
        <el-row class="demo-autocomplete">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <span class="demonstration">显示</span>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage2"
                :page-sizes="[10, 25, 50, 100]"
                :page-size="10"
                layout="sizes"
                :total="1000"
              >
              </el-pagination></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light" style="float: right">
              <span class="demonstration" style="margin-right: 5px"
                >从当前数据中检索:</span
              >
              <el-autocomplete
                class="inline-input"
                value-key="name"
                v-model="queryInfo.query"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                :trigger-on-focus="false"
                @select="handleSelect"
              ></el-autocomplete></div
          ></el-col>
        </el-row>
        <!-- 条形码发放列表 -->
        <el-table :data="tableData" border>
          <el-table-column
            label="发放档口名"
            sortable
            prop="stallsName"
          ></el-table-column>
          <el-table-column
            label="发放时间"
            sortable
            prop="grantDate"
          ></el-table-column>
          <el-table-column
            label="发放数量"
            sortable
            prop="grantCount"
          ></el-table-column>
          <el-table-column
            label="开始编号"
            sortable
            prop="startNumber"
          ></el-table-column>
          <el-table-column
            label="结束编号"
            sortable
            prop="endNumber"
          ></el-table-column>
          <el-table-column
            label="发放人员"
            sortable
            prop="deliverName"
          ></el-table-column>
          <el-table-column label="领取人员" prop="getName"></el-table-column>
          <el-table-column label="操作">
            <template slot="scope">
              <el-button type="primary" icon="el-icon-edit"></el-button>
              <el-button type="primary" icon="el-icon-share"></el-button>
              <el-button type="primary" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </el-main>
</template>
<script>
export default {
  inject: ["reload"],
  name: "refresh",
  props: ["allInfos"],
  data() {
    return {
      // 获取分页
      pageInfo: {
        // 当前页码
        page: 1,
        // 每页显示条数
        size: 10,
      },
      // 存放返回数据的数组
      tableData: [],
      // 返回的数据的数目
      total: 0,
    };
  },

  created() {
    // 条形码发放的生命函数
    this.getFindBarcodeRecovery();
  },

  components: {},

  computed: {},

  methods: {
    // 数据刷新
    refresh() {
      this.reload();
    },
    // 监听页码值改变的事
    handleSizeChange(newPage) {
      // 改变当前页码
      this.pageInfo.page = newPage;
      // 刷新列表
      this.getFindBarcodeRecovery();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 条形码发放列表函数
    async getFindBarcodeRecovery() {
      const { data: res } = await this.reqM1Service(
        `/allGrant/${this.pageInfo.page}/${this.pageInfo.size}`,
        "",
        "get"
      );
      console.log(res);
      if (res.status != 0) {
        return this.$message.error("获取数据失败");
      }
      this.tableData = res.object.content;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  margin-left: 15px;
  margin-right: 15px;
}

/deep/.el-breadcrumb__inner.is-link {
  color: #98a6ad;
  font-weight: 500;
}
/deep/.el-breadcrumb__inner.is-link:hover {
  color: #777;
}
/deep/.el-pagination {
  font-weight: 500;
}
/deep/.el-pagination .el-select .el-input {
  margin: -13px 5px;
}
/deep/.demonstration {
  float: left;
  padding-top: 8px;
}
/deep/.block {
  margin-top: 10px;
  margin-left: 20px;
}
/deep/.el-select-dropdown__list {
  padding: 8px 0 im !important;
}
/deep/ .el-table {
  margin-top: 10px;
  font-weight: normal;
}
</style>